import styles from '../../styles/Avatar.module.css';
import Image from "next/image";
import react, { useRef, useState } from "react";

const Avatar = ()=> {
	const words = ['Guan Xiaoyang','KilloYang']
	const [index,setIndex] = useState(0)
	const ref = useRef()
	
	setTimeout(()=>{
		if(ref.current){
			ref.current.classList.add(styles.out)
		}
	},2900)
	
	const handelEnd = ()=>{
		ref.current.classList.remove(styles.out)
		setIndex(prev => (prev + 1 === words.length ? 0 : prev + 1))
	}
	
	return (
		<div className={styles.container}>
			<Image src='/avatar.jpeg' alt='Avatar' width={85} height={85} priority className={styles.avatar} />
			<div className={styles.description}>
			        <h1 className={styles.name} ref={ref} onTransitionEnd={handelEnd}>
			                  {words[index]}
			                </h1>
			                <p className={styles.tag}>Front-End Developer / Graduate / Chongqing</p>
			      </div>
			
		</div>
	)
}

export default Avatar